<template>
  <view class="su-descriptions" :class="{ 'su-descriptions--border': border }">
    <table>
      <tbody v-for="(t1, i1) in column" :key="i1">
        <template v-if="t1.label">
          <tr>
            <td
              colspan="2"
              class="su-descriptions__title"
              :class="t1.className"
              :style="titleStyle"
            >
              {{ t1.label }}
            </td>
          </tr>
        </template>
        <template v-if="!isEmpty(t1.children)">
          <tr v-for="(t2, i2) in t1.children" :key="i2">
            <td class="su-descriptions__label" :class="t2.className" :style="labelStyles">
              {{ t2.label + labelSuffix }}
            </td>
            <td class="su-descriptions__value" :class="t2.className" :style="contentStyle">
              {{ data[t2.prop] }}
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </view>
</template>

<script setup>
import { useVModel } from '@vueuse/core';
import { toPx } from '@/supreme/core';
import { normalizeStyle } from 'vue';
defineOptions({
  name: 'SuDescriptions'
});
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  option: {
    type: Object,
    default: () => ({})
  },
  border: {
    type: Boolean,
    default: true
  },
  titleStyle: {
    type: Object,
    default: () => ({})
  },
  labelStyle: {
    type: Object,
    default: () => ({})
  },
  contentStyle: {
    type: Object,
    default: () => ({})
  }
});
const { option, labelStyle } = props;
const column = computed(() => {
  return option.column || [];
});
const labelSuffix = computed(() => {
  return option.labelSuffix || '';
});
const labelStyles = computed(() => {
  const { labelWidth = 120, labelAlign = 'left' } = option;
  return normalizeStyle({
    textAlign: labelAlign,
    width: toPx(labelWidth),
    ...labelStyle
  });
});
const emit = defineEmits(['update:modelValue']);
const data = useVModel(props, 'modelValue', emit);
</script>
<style lang="scss">
.su-descriptions {
  width: 100%;

  table {
    width: 100%;
    border-collapse: collapse;
  }
  td,
  th {
    padding: 12px 10px;
    vertical-align: middle;
    box-sizing: border-box;
    line-height: 1.2em;
  }

  &__title {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
  }
  &__label {
    text-align: left;
    font-size: 14px;
  }

  &__value {
    font-size: 14px;
    text-align: left;
    font-weight: normal;
  }
  &--border {
    td,
    th {
      border: 1px solid #ccc;
    }
    .su-descriptions__title {
      font-weight: bold;
      text-align: center;
      background: #f0f0f0;
    }
    .su-descriptions__label {
      font-weight: bold;
      text-align: right;
      background: #f0f0f0;
    }
  }
}
</style>
